<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>开户申请</title>
		<link rel="stylesheet" href="css/muse-ui.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
		<link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css">
		<link rel="stylesheet" href="css/muse-ui-loading.css">
		<link rel="stylesheet" href="https://at.alicdn.com/t/font_951857_sr7zod4vu4.css">
		<link rel="stylesheet" href="https://at.alicdn.com/t/font_1022050_1wmjhhy3buw.css">
		<script src="js/vue.min.js"></script>
		<script src="js/muse-ui.js"></script>
		<script src="js/muse-ui-loading.js"></script>
		<script src="js/muse-ui-toast.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/utils.js"></script>
		<style>
			.container{
				height:calc(100vh);
				width: 100%;
				padding: 20px;
			}
			.container input {
				color: #ff4081;
			}
			.login-head{
				margin-top: 20%;
				width: 100%;
				text-align: center;
			}
			.icon-denglu{
				color: #fff;
				font-size: 70px;
			}
			.icon{
				font-size: 38px;
				color: #fff;
				padding: 0 1rem;
				border-radius: 10px;
			}
			.badge{
				position: absolute;
				left: 20px;
				top: -5px;
			}
			.gird{
				width: 33%;height: 100px;display: flex;flex-direction: column;align-items: center;justify-content: center;
				position: relative;
			}
		</style>
	</head>
	<body>
		<div id="body">
			<mu-appbar style="width: 100%;position: fixed;top: 0;padding-top: 20px;height: auto;" color="secondary">
				<mu-button icon slot="left" @click="util.back()">
					<mu-icon value="arrow_back"></mu-icon>
				</mu-button>
				燃气交费
			</mu-appbar>
			<mu-container style="padding-top: 76px;">
				<div style="display: flex;flex-wrap: wrap;">
					<div class="gird" @click="util.tip('开通中')">
						<i class="iconfont icon-nfc icon" style="background-color: #3FCCF0;"></i>
						卡表充值(NFC)
					</div>
					<div class="gird" @click="util.tip('开通中')">
						<i class="iconfont icon-jilu icon" style="background-color:#FF4081"></i>
						充值记录
					</div>
					<div class="gird" @click="util.openWindow('my_order.html')">
						<i class="iconfont icon-shenghuojiaofei icon" style="background-color: #C8A84A;"></i>
						普表交费
					</div>
					<div class="gird" @click="util.openWindow('my_order.html')">
						<i class="iconfont icon-jilu1 icon" style="background-color: #FF6900;"></i>
						交费记录
					</div>
					<div class="gird" @click="util.openWindow('my_order.html')">
						<i class="iconfont icon-zhangdan icon" style="background-color: green;"></i>
						账单查询
					</div>
				</div>
			</mu-container>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#body",
			data() {
				return {
					name:"",
					phone:"",
					buildingId:"",
					buildingList:[],
					address:""
				}
			},
			methods: {
			}
		})
		document.addEventListener('plusready', function() {});
	</script>
</html>
